<template>
<!-- 一条文章的组件 -->
  <div>
    <van-cell @click="detailBtn">
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box">
          <!-- 标题 -->
          <span>{{obj.title}}</span>

          <!-- 渲染后加图片：单图 -->
          <img v-if="obj.cover.type===1" v-lazy="obj.cover.images[0]" alt="" class="thumb">
        </div>
        <!-- 三图： -->
        <div v-if="obj.cover.type>1"  class="thumb-box">
          <img v-for="(imgUrl,index) in obj.cover.images" :key="index" v-lazy="imgUrl" alt="" class="thumb">
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <span>{{obj.aut_name}} &nbsp;&nbsp; {{obj.comm_count}}评论 &nbsp; {{obj.pubdate | dateformat}}</span>
          <!-- 关闭按钮 -->
          <van-icon name="cross" @click="sheetFn" v-if="showCloseIcon"/>
        </div>
      </template>
    </van-cell>

    <!-- 反馈面板 -->
    <!-- 最后：因为这个组件再ArticleList内，一华东容易碰到下拉刷新组件，修改这个标签的挂载点(body上) -->
    <van-action-sheet
    v-model="show"
    :actions="actions"
    @select="onSelect"
    cancel-text="取消"
    get-container="body"/>
    <!-- 第二套(二级)反馈面板 -->
     <van-action-sheet
    v-model="show2"
    :actions="actions2"
    @select="onSelect2"
    cancel-text="取消"
    get-container="body"/>
  </div>
</template>

<script>
// 21二级数据封装：因为已经有actions，所以这里可以起别名，自定义
import { actions as SecondActions } from '@/api/Constant/Actions'

export default {
  // 数据渲染时
  props: {
    obj: {
      type: Object,
      required: true
    },

    showCloseIcon: { // 控制右下角x按钮是否显示
      type: Boolean,
      default: true // 默认显示(因为首页不想碰代码，首页默认不传就是true显示)
    }
  },
  data () {
    return {
      show: false,
      actions: [{ name: '不感兴趣' }, { name: '反馈垃圾内容' }, { name: '拉黑作者' }],
      show2: false,
      // 21
      actions2: SecondActions
    }
  },
  methods: {
    // 一级面板点击选中事件
    onSelect (val) {
      // 二级出现后，判断点击后的反应(目前只做了这一项)
      if (val.name === '反馈垃圾内容') {
        this.show2 = true
        // this.show = false
        // 21.3点不感兴趣时前台删除---父传子
      } else if (val.name === '不感兴趣') {
        this.show = false
        // 文章id传出去
        this.$emit('removeObj', this.obj.art_id, 'dislike')
      }
    },
    // 关闭x按钮的点击事件
    sheetFn () {
      this.show = true
    },
    // 二级面板点击选中事件
    onSelect2 (obj) {
      // 21.2返回功能
      if (obj.name === '返回') {
        this.show2 = false
        // 21.5 举报功能--子传父---再传个惨，区分类型
      } else {
        // 参数1：触发自定义参数的名字(子传父)；
        // 参数2：文章ID；
        // 参数3：为了区分是不感兴趣还是举报；
        // 参数4：举报的类型
        this.$emit('removeObj', this.obj.art_id, 'report', obj.value)
        this.show = false
        this.show2 = false
      }
    },

    // 24.0点击进去详情页
    // art_id可能是大数(BigNumber对象，所以强制转换成字符串)
    detailBtn () {
      this.$router.push(`/article/${this.obj.art_id.toString()}`)
    }
  }
}
</script>

<style lang="less" scoped>
.title-box {
  // 标题样式
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.label-box {
  // label描述样式
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.thumb {
  // 图片样式
  // 矩形黄金比例：0.618
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  // 保持图片比例
  object-fit: cover;
}

.thumb-box {
  // 三图容器
  display: flex;
  justify-content: space-between;
}
</style>
